<template>
  <el-dialog
    :title="notices.title"
    :visible.sync="centerDialogVisible"
    width="30%"
    center
  >
    <p style="textAlign: center;marginTop: 20px">{{ notices.content }}</p>
    <span slot="footer" class="dialog-footer">
      <el-button
        v-if="notices.cancel"
        @click="cancelFun(notices)"
      >取 消</el-button>
      <el-button type="primary" @click="runFun(notices)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// 全局弹窗组件
/**
 * 调用方式
 *  this.$Dialog({
        title: '测试标题ya', // 弹窗标题
        content: '这是一个弹窗的内容ya', // 弹窗内容
        run: () => { // 确认弹窗按钮事件。必填
            console.log('run')
        },
        cancel: () => { // 取消弹窗按钮事件。选填 （不填弹窗只显示确认按钮居中）
            console.log('cancel')
        }
    })
 */

// 默认选项
const DefaultOptions = {
  title: '测试标题',
  content: '这是一个弹窗的内容',
  run: () => {}
}
let mid = 0
export default {
  data() {
    return {
      notices: [],
      centerDialogVisible: false
    }
  },
  methods: {
    add(notice = {}) {
      // name标识 用于移除弹窗
      const _name = this.getName()
      // 合并选项
      this.notices = Object.assign(
        {
          _name
        },
        DefaultOptions,
        notice
      )

      console.log(this.notices, 'this.notices')
      this.centerDialogVisible = true
      //   setTimeout(() => {
      //     this.removeNotice(_name)
      //   }, notice.duration)
    },
    // 点击取消按钮
    cancelFun(notices) {
      notices.cancel()
      this.centerDialogVisible = false
    },
    // 点击确认按钮
    runFun(notices) {
      notices.run()
      this.centerDialogVisible = false
    },
    // 为此挂载添加唯一标识
    getName() {
      return 'id_' + mid++
    },
    // 清除挂载信息
    removeNotice(_name) {
      const index = this.notices.findIndex(item => item._name === _name)
      this.notices.splice(index, 1)
    }
  }
}
</script>
<style>
/* .wrap {
    position: fixed;
    top: 50px;
    left: 50%;
    display: flex;
    flex-direction: column;
    z-index: 100000;
    align-items: center;
    transform: translateX(-50%);
}

.message {
    --borderWidth: 3px;
    min-width: 240px;
    max-width: 500px;
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 0 8px #ddd;
    overflow: hidden;
}

.content {
    padding: 8px;
    line-height: 1.3;
}

.message.info {
    border-left: var(--borderWidth) solid #909399;
    background: #F4F4F5;
}

.message.success {
    border-left: var(--borderWidth) solid #67C23A;
    background: #F0F9EB;
}

.message.error {
    border-left: var(--borderWidth) solid #F56C6C;
    background: #FEF0F0;
}

.message.warning {
    border-left: var(--borderWidth) solid #E6A23C;
    background: #FDF6EC;
} */
</style>
